<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
	<title>ajaxpage</title>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/ajaxpage.css">
	<link rel="stylesheet" type="text/css" href="/css/admin.css">
	<script type="text/javascript" src="/js/ajaxpage.js"></script>
	<style type="text/css">
	  [v-cloak]{
      display: none !important;
      }
    #loading  
	{  
	    position:fixed;  
	    top:30%;  
	    left:45%;  
	    z-index:999;  
	}  
	</style>
</head>
<body>
    <div class="container">
        <div class="row">
           <!--  <div class="col-md-12">
           <span>{!!\Purifier::clean('<p><br></p><table class="table table-bordered"><tbody><tr><td>4545454</td><td>4545</td><td>454</td><td>45</td><td>445</td></tr><tr><td>45</td><td>5</td><td>54</td><td>455</td><td>4</td></tr><tr><td>454</td><td>45</td><td>4</td><td>5</td><td>454</td></tr></tbody></table><p><br></p>');!!}</span> -->
            <button type="button" class="btn btn-primary" onclick="showBox();">推荐商品</button>
            <a href="{{route('order.index')}}" class="btn btn-default">测试 restful</a>
            </div>
        </div>
    </div>
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" style="margin-top: 5%;">
        <div class="modal-dialog" role="document" style="width: 800px;">
            <form id="editfrm">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <input type="hidden" id="infoid" name="id" value="2323">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">商品列表</h4>
                        <div id="loading" style="display: none;">  
  <img style="width: 80px; height: 40px;background-color: #eee;" src="/images/time.gif" class="img-responsive">  
</div>
                    </div>
                    <div class="modal-body">
                <div id="frmdata" class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">
                        <h3 class="panel-title panel-title-custom">
                        <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 商品列表
                        <span style="float:right">
                            <div class="navbar-form panel-form">
                                <input type="text" id="keyword"  name="keyword"  value="" class="form-control" placeholder="请输入商品名称">
                                <button id="search_btn" onclick="turnPage(1);" class="btn btn-info" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</button>
                            </div>
                        </span>
                        </h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="checkAll" ></th>
                                <th>商品名称</th>
                                <th>单价(元)</th>
                                <th>库存</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                         <tr v-cloak  v-if="itemInfo.length==0">
                                <td colspan="6" style="text-align: center">暂无数据</td>
                            </tr>
                        <tr v-cloak v-for="item in itemInfo">
                            <td><input type="checkbox" :value="item.id" name="ids[]" ></td>
                            <td><span data-toggle="tooltip" data-placement="bottom" title="">@{{item.name}}</span></td>
                            <td><span style="color:red;">￥</span>@{{item.price}}</td>
                            <td>@{{item.stock}}</td>
                            <td>@{{item.created_at}}</td>
                            <td>@{{item.updated_at}}</td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
                    <div class="panel-footer">
                        <div id="pageBar"><!--这里添加分页按钮栏--></div>
                     </div>
                </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="edit_btn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
/*$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});*/
var curPage=1;        //当前页数
var totalItem=0;      //总记录数
var pageSize=4;       //每一页记录数
var vm=new Vue({
el: '#frmdata',
data: {
itemInfo:[]
},
/*mounted(){
	turnPage(1);
}*/
});
function turnPage(page){
	curPage=page;
		$("#loading").show();
    axios.post('/admin/item',{"keyword":$("#keyword").val(),"pageNum":curPage,"pageSize":pageSize,"_token":"{{ csrf_token() }}"})
      .then(response=>{
      	console.log(response.data);
      	vm.itemInfo=response.data.items;
      	totalItem=response.data.totalCount;
      	console.log(vm.itemInfo);
        $("input[type='checkbox']").prop('checked', false);
      	getPageBar();
      	setTimeout(function(){$("#loading").hide();},500);
      })
      .catch(function(error){
			console.log(error);
      });

}
function showBox()
{
	turnPage(1);
	$("#myModal").modal();
}
$("#checkAll").click(function(){
        $("input[name='ids[]']").prop('checked', $(this).prop('checked'));
    });
$("#edit_btn").click(function(){
    var obj=$("input[name='ids[]']:checked");
    var len= obj.length,ids=[];
    if(len<=0) {
        alert("请选择要推荐的商品");
        return false;
    }
    else{
        $.each(obj, function(index, val) {
             ids.push(obj.eq(index).val());
        });
    console.log(ids);
    }
  });
</script>